<template>
  <div id="container">
    <el-form :model="privilege" ref="privFormRef" :rules="rules" status-icon>
      <el-form-item label="IP地址" prop="ip">
        <el-input v-model="privilege.ip"></el-input>
      </el-form-item>
      <el-form-item label="URL地址" prop="url">
        <el-input v-model="privilege.url"></el-input>
      </el-form-item>
      <el-form-item label="服务" prop="url">
        <el-input v-model="privilege.service"></el-input>
      </el-form-item>
      <el-form-item label="权限" prop="value">
        <el-select v-model="privilege.value" placeholder="允许">
          <el-option label="允许" value="enable"></el-option>
          <el-option label="禁止" value="disable"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(privFormRef)" >提交</el-button>
        <el-button @click="resetForm(privFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

import { IPvalidatorForEl } from '../utils/IPreg';
import axios from 'axios';

const privFormRef = ref<FormInstance>()
const privilege = reactive({
  ip: "",
  url: "",
  value: "",
  service:""
})

const rules = reactive<FormRules>({
  ip: [
    {
      type: 'string',
      required: true,
      message: "请输入IP地址",
      trigger: "blue"
    },
    {
      message: "IP地址格式错误",
      trigger: "change",
      validator: IPvalidatorForEl,
    }
  ],
  url: [
    {
      type: 'string',
      required: true,
      message: "请输入URL",
      trigger: "change"
    }
  ],
  value: [
    {
      type: "string",
      required: true,
      trigger: "change",
    }
  ],
  service: [
    {
      type: 'string',
      required: true,
      message: "请输入service",
      trigger: "change"
    }
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  //alert(privilege.)
  var pdata=
  {
      "IP":privilege.ip,
      "servicename":privilege.service,
      "serviceurl":privilege.url
  }
  if (!formEl) {
    return
  }
  //提交前先查，有重复的url就不再提交
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      //console.log(pdata)
      //let datapriviledge=JSON.stringify(pdata)
      //console.log(datapriviledge)
      //axios.post('/Insert?IP=10.38.14.93&servicename=geoserver&serviceurl=/test/')
      axios.post('/Insert',pdata)
        .then(function (response) {
          console.log(response);
          alert("提交成功！")
        })
        .catch(function (error) {
          console.log(error);
          alert(error)
        });
      /*
      axios({
        method:'post',
        url:'/Insert',
        data:JSON.stringify(pdata),
        
        headers: {
            'Content-Type': 'application/json'
        }
      })
      */     
    } else {
      console.log('error submit', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

</script>

<style scoped>
#id {
  width: 200px
}
</style>
